<template>
  <bsCard v-loading="loading" class="intellectual-wrapper" :width="getBsLRWPercent(1280)" height="200px">
    <div class="intellectual-l">
      <div class="numberBox">
        <div class="font_led">{{ enterpriseOverview.zoneNum }}</div>
        <div class="box-text">企业数量</div>
      </div>
      <div class="numberBox">
        <div class="font_led">{{ registCapiFormat.val }}</div>
        <div class="box-text">注册资本({{registCapiFormat.unit}})</div>
      </div>
      <div class="numberBox">
        <div class="font_led">{{ enterpriseOverview.gdpYear }}</div>
        <div class="box-text">GDP</div>
      </div>
      <div class="numberBox">
        <div class="font_led">{{ enterpriseOverview.industIncrease }}</div>
        <div class="box-text">工业销售增加值</div>
      </div>
      <div class="numberBox">
        <div class="font_led">{{ operateIncomeFormat.val }}</div>
        <div class="box-text">营业收入({{ operateIncomeFormat.unit }})</div>
      </div>
      <div class="numberBox">
        <div class="font_led">{{ profitFormat.val }}</div>
        <div class="box-text">利润({{ profitFormat.unit }})</div>
      </div>
    </div>
    <!-- <div class="intellectual-R">
      <div class="icon-title">知识产权</div>
      <div class="icon-title-val">{{ enterpriseOverview.propetyNum}}</div>
    </div>-->
  </bsCard>
</template>

<script>
import '../styles/index.scss'
import bsCard from './bsCard.vue'
import { moneyFormat } from './tools'
import { getEnterpriseOverview } from '@/api/bigscreen.js'
export default {
  name: 'intellectual',
  components: {
    bsCard
  },
  inject: ['getBsLRWPercent'],
  data() {
    // let curDate = new Date()
    // let year = curDate.getFullYear()
    return {
      loading: true,
      enterpriseOverview: {
        queryTime: '',
        zoneNum: '0',
        registCapi: '0',
        gdpYear: '0',
        industIncrease: '0',
        propetyNum: '0',
        operateIncome: '0',
        profit: '0'
      }
      //
      // year: `${year}`.slice(2)
    }
  },
  computed: {
    registCapiFormat() {
      return moneyFormat(this.enterpriseOverview.registCapi)
    },
    operateIncomeFormat() {
      return moneyFormat(this.enterpriseOverview.operateIncome)
    },
    profitFormat() {
      return moneyFormat(this.enterpriseOverview.profit)
    }
  },
  created(){
    this.fetchEnterpriseOverview()
  },
  methods: {
    async fetchEnterpriseOverview() {
      this.loading = true
      try {
        const res = await getEnterpriseOverview()
        if (res.resultCode === 200) {
          this.enterpriseOverview = {
            ...this.enterpriseOverview,
            ...res.resultData
          }
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    }
  }
}
</script>

<style lang='scss'>
@import '../styles/_variables.scss';
.intellectual-wrapper {
  .bs-card-content {
    display: flex;
  }

  .intellectual-l {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    // margin-right: 20px;
  }
  .intellectual-R {
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    width: wPercent(170, 1280);
  }

  .numberBox {
    position: relative;
    height: 115px;
    min-width: 170px;
    max-width: 285px;
    background: url('../assets/number-bottom.png') bottom center/170px no-repeat;
    text-align: center;

    .font_led {
      font-size: 60px;
      line-height: 76px;
      transform: translateY(-10px);
    }

    .box-text {
      position: absolute;
      width: 230px;
      color: $FontBlue;
      font-size: 24px;
      transform: translate(-50%, 20px);
      bottom: 0;
      left: 50%;
    }
  }

  .icon-title {
    &::before {
      background-image: url('../assets/intellectual.png');
    }
  }
}
</style>
